<template>
  <view id="home-box" v-if="totalData.length > 0">
    <view class="top-box">
      <view class="top-h1">
        <view
          @click="$routerTo({url:topNavList[1].url,data : topNavList[1]});"
          class="input-box"
        >
          <input type="text" />
          <i class="iconfont iconsousuo"></i>
        </view>
        <i class="iconfont icongerenzhongxinxuanzhong" @click="jumpToPage(topNavList[0])"></i>
        <i class="iconfont iconadd"></i>
      </view>
      <view class="top-h2">
        <view class="item" @click="$routerTo({ data : topNavList[2]})">
          <view class="iconfont">
            <image
              mode="widthFix"
              :src="topNavList[2].ico"
            />
          </view>
          <text>{{topNavList[2].name}}</text>
        </view>
        <view class="item" @click="$routerTo({ data : topNavList[3]})">
          <view class="iconfont">
            <image
              mode="widthFix"
              :src="topNavList[3].ico"
            />
          </view>
          <text>{{topNavList[3].name}}</text>
        </view>
        <view class="item" @click="$routerTo({url: mallUrl, data : topNavList[4]})">
          <view class="iconfont">
            <image
              mode="widthFix"
              :src="topNavList[4].ico"
            />
          </view>
          <text>{{topNavList[4].name}}</text>
        </view>
        <view class="item" @click="$routerTo({data : topNavList[5]})">
          <view class="iconfont">
            <image
              mode="widthFix"
              :src="topNavList[5].ico"
            />
          </view>
          <text>{{topNavList[5].name}}</text>
        </view>
      </view>
    </view>
    <view class="home-container">
      <view class="home-sec-box">
        <h3 class="userName">你好，{{username}}</h3>
        <view class="swiper-box">
          <swiper
            @change="change"
            autoplay
            circular
            previous-margin="30rpx"
            next-margin="30rpx"
            class="swiper"
            indicator-active-color="#1eb825"
          >
            <swiper-item
              v-for="(item,index) in advertisement"
              @click="$routerTo({ data : item})"
              :key="index"
              class="swiperitem"
            >
              <view>
                <image :src="item.pic" mode="widthFix" />
              </view>
            </swiper-item>
          </swiper>
          <view class="dots">
            <view
              :class="['dot-item',current==index?'active':'']"
              v-for="index of advertisement.length"
              :key="index"
            ></view>
          </view>
        </view>
      </view>
      <view class="home-box-1">
        <view class="icons">
          <view
            class="icon-item"
            v-for="(item,index) in navList"
            :key="index"
            @click="jumpToPage(item)"
          >
            <image :src="item.ico" />
            <text>{{item.name}}</text>
          </view>
        </view>
        <view class="advertising" @click="$routerTo({ url : advertising[0].url})">
          <image mode="widthFix" :src="advertising[0].pic" />
        </view>
      </view>
      <view class="home-box-2">
        <view class="box-con">
          <view class="tongzhiIco">
            <image mode="widthFix" src="../../static/tongzhi.png" />
          </view>
          <!-- <view class="text">你有{{notice.num}}条消息未读<text>{{notice.time}}</text></view> -->
          <view class="text">{{task_title}}</view>
          <view class="iconfont iconjiantou"></view>
        </view>
      </view>
      <!-- 智慧工地 -->
      <view class="home-box-4">
        <view
          @click="$routerTo({to:this.redirectTo,url:totalData[5].data.url});"
          class="common-top"
        >
          <h4>直采交易大厅</h4>
          <view class="iconfont iconjiantou"></view>
        </view>
        <view class="tabs">
          <view
            v-for="(item,index) in DirectMining"
            :key="index"
            :class="['item', {active: matchStatus ==index}]"
            @click="matchTabClick(index)"
          >{{item.name}}</view>
        </view>
        <view class="lists" v-if="DirectMining[matchStatus].data.length > 0">
          <view class="item" v-for="(item,index) in DirectMining[matchStatus].data" :key="index" @click="$routerTo({data : item})">
            <view class="icon">{{item.indus_name}}</view>
            <view class="con">
              <h4 class="ellipsis1">{{item.task_title}}</h4>
              <p class="ellipsis1">{{item.task_desc}}</p>
            </view>
            <view class="date">{{item.start_time}}</view>
          </view>
        </view>
        <view class="nodata" v-else>
          <text class="notxt">抱歉，暂无数据</text>
        </view>
      </view>
      <!-- 智慧工地 -->
      <view class="home-box-4">
        <view class="common-top" @click="$routerTo({url : mallUrl});">
          <h4>智慧建筑集市信息</h4>
          <navigator url="../match/pages/index" class="iconfont iconjiantou"></navigator>
        </view>
        <view class="tabs">
          <view
            v-for="(item,index) in Manifest"
            :key="index"
            :class="['item', {active: shopStatus == index}]"
            @click="shopTabClick(index)"
          >{{item.name}}</view>
        </view>
        <view class="lists2" v-if="Manifest[shopStatus].data.length>0">
          <view class="item" v-for="(item,index) in Manifest[shopStatus].data" :key="index">
            <view class="con">
              <h4>{{item.compose_name}}</h4>
              <view class="b">
                <p class="name">{{item.username}}会员</p>
                <p class="date">{{item.add_time}}</p>
              </view>
            </view>
            <view class="num">
              <i>x</i>
              <text>{{item.num}}</text>
            </view>
          </view>
        </view>
        <view class="nodata" v-else>
          <text class="notxt">抱歉，暂无数据</text>
        </view>
      </view>
      <!-- 智慧工地 -->
      <view class="home-box-3">
        <view class="common-top" @click="$routerTo({ url : '../../site/pages/index',data : siteData})">
          <h4>智慧工地</h4>
          <navigator url class="iconfont iconjiantou"></navigator>
        </view>
        <site-template :sitedata="siteData.data" v-if="siteData.is_show == 1"></site-template>
        <view class="nodata" v-else>
          <text class="notxt">{{siteData.tips}}</text>
        </view>
      </view>
      <!-- 智库 -->
      <view class="home-box-3">
        <view class="common-top" @click="$routerTo({url : topNavList[5].url})">
          <h4>智库</h4>
          <navigator url class="iconfont iconjiantou"></navigator>
        </view>
        <study-template :studydata="studyData.data" v-if="studyData.is_show == 1"></study-template>
      </view>
    </view>
  </view>
</template>

<script>
import studyTemplate from "@/compontents/study/index";
import siteTemplate from "@/compontents/site/index";
export default {
  components: {
    studyTemplate,
    siteTemplate
  },
  data() {
    return {
      totalData: [],
      current: 0, // 轮播图指示点
      topNavList: {}, // 顶部导航栏；
      advertisement: {}, // 轮播图
      navList: {}, // 导航栏
      advertising: {}, // 中部广告图
      task_title: {}, // 消息通知
      DirectMining: {}, // 直采交易大厅
      Manifest: {}, // 智慧建筑集市信息
      siteData: {}, // 智慧工地扬尘数据
      studyData: {}, // 智库
      shopStatus: 0,
      matchStatus: 0,
      username: "",
      mallUrl: "",
      token: "",
      firstNum: 0
    };
  },
  methods: {
    getIndexData() {
      this.$axios({
        url: "api/index/index",
        data: { token: this.token ? this.token : "" }
      }).then(res => {
        const { returnData } = res.data;
        this.totalData = returnData;
        this.topNavList = returnData[0].data.list; // 顶部导航栏；
        this.advertisement = returnData[1].data.list; // 轮播图
        returnData[2].data.list.forEach((item, index) => {
          if (item.name == "智慧工地") {
            item.url = "../../site/pages/index";
          } else if (item.name == "智慧集市") {
            item.url = this.mallUrl; //智慧集市的链接被放到登陆成功后的返回值中
          }
        });
        this.navList = returnData[2].data.list; // 导航栏
        this.advertising = returnData[3].data.list; // 中部广告图
        this.task_title = returnData[4].data.task_title; // 消息通知
        this.DirectMining = returnData[5].data.list; // 直采交易大厅
        this.Manifest = returnData[6].data.list; // 智慧建筑集市信息
        this.siteData = returnData[7]; // 智慧工地扬尘数据
        console.log(this.siteData);
        this.studyData = returnData[8]; // 智库
      });
    },
    change(e) {
      this.current = e.detail.current;
    },
    matchTabClick(index) {
      this.matchStatus = index;
      console.log(this.matchStatus);
    },
    shopTabClick(index) {
      // 智慧建筑集市信息
      this.shopStatus = index;
      console.log(this.shopStatus);
    },
    jumpToPage(item) {
      // 菜单跳转
      if (item.name == "个人中心") {
        item.url = "../../pages/Personal/index";
        uni.switchTab({
          url: "../../pages/Personal/index"
        });
        return;
      }
      this.$routerTo({ data: item });
    }
  },
  onShow() {
    const { username, token, mallUrl } = wx.getStorageSync("userInfo");
    this.username = username ? username : "游客";
    this.token = token;
    this.mallUrl = mallUrl;
    if (token && this.firstNum == 0) {
      console.log(213);
      this.getIndexData();
      this.firstNum = 1;
    }
  },
  created() {
    this.getIndexData();
  }
};
</script>
<style lang="scss" scoped>
.ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-box-3 {
  @extend .common-box;
  .nodata {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    .notxt {
      color: #666 !important;
    }
  }
}
.common-box {
  @extend .home-box-bg;
  padding: 32rpx 28rpx;
  margin-top: 28rpx;
  .common-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h4 {
      font-size: 32rpx;
      font-weight: normal;
      letter-spacing: 1px;
      font-weight: 900;
    }
  }
}
.home-box-4 {
  @extend .common-box;
  .tabs {
    display: flex;
    border-radius: 8rpx;
    overflow: hidden;
    margin-top: 34rpx;
    position: relative;
    &:before {
      content: "";
      z-index: 0;
      background: transparent;
      border-radius: 8rpx;
      position: absolute;
      border: 1px solid #0084ff;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .item {
      letter-spacing: 1px;
      text-align: center;
      padding: 16rpx 0;
      font-size: 24rpx;
      flex: 1;
      border: 0;
      background: transparent;
      position: relative;
      color: #909090;
      &.active {
        color: #fff;
        background: #0084ff;
      }
    }
  }
  .lists {
    margin-top: 22rpx;
    .item {
      padding: 17rpx 0;
      display: flex;
      align-items: center;
      .icon {
        flex-shrink: 0;
        width: 84rpx;
        height: 84rpx;
        color: #fff;
        font-weight: 700;
        font-size: 34rpx;
        text-align: center;
        border-radius: 50%;
        line-height: 84rpx;
        background: #0084ff;
      }
      .con {
        flex: 1;
        padding: 0 17rpx;
        width: 62%;
        h4 {
          letter-spacing: 1px;
          font-size: 26rpx;
        }
        p {
          font-size: 20rpx;
          color: #909090;
          letter-spacing: 1px;
          padding-top: 6rpx;
        }
      }
      .date {
        color: #909090;
        font-size: 20rpx;
        flex-shrink: 0;
      }
    }
  }
  .lists2 {
    margin-top: 22rpx;
    .item {
      display: flex;
      align-items: center;
      padding: 17rpx 0 28rpx;
      border-bottom: 1px solid #e1e1e1;
      .con {
        flex: 1;
        width: 67%;
        h4 {
          letter-spacing: 1px;
          font-size: 26rpx;
        }
        .b {
          font-size: 20rpx;
          color: #909090;
          letter-spacing: 1px;
          padding-top: 20rpx;
          display: flex;
          justify-content: space-between;
        }
      }
      .num {
        display: flex;
        justify-content: flex-end;
        i {
          font-size: 32rpx;
          color: #0084ff;
          margin: 0 22rpx 0 30rpx;
          margin-top: 0.5;
          padding-top: 14rpx;
        }
        text {
          font-size: 84rpx;
          font-weight: normal;
          color: #0084ff;
        }
      }
    }
  }
}
.home-container {
  background: #f1f1f1;
}
.home-box-bg {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}
.home-box-2 {
  @extend .home-box-bg;
  margin-top: 14rpx;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
  .box-con {
    padding: 16rpx 28rpx;
    display: flex;
    align-items: center;
    .tongzhiIco {
      height: 100rpx;
      width: 100rpx;
    }
    .text {
      text {
        padding-left: 16rpx;
        font-size: 16rpx;
        color: #909090;
      }
      letter-spacing: 1px;
      flex: 1;
      position: relative;
      margin-left: 12rpx;
      padding-left: 0.9rem;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14rpx;
        border-radius: 50%;
        background-color: #e02b2b;
        width: 8rpx;
        height: 8rpx;
      }
    }
  }
}
.home-box-1 {
  border-radius: 30rpx;
  background: #fff;
  overflow: hidden;
  .icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
    .icon-item {
      display: flex;
      flex-direction: column;
      width: 25%;
      justify-content: center;
      align-items: center;
      image {
        width: 90rpx;
        height: 90rpx;
      }
    }
  }
}

.home-sec-box {
  .userName {
    color: #666;
    padding-left: 20rpx;
    padding-top: 10rpx;
  }
  .swiper-box {
    padding-top: 32rpx;
    padding-bottom: 32rpx;
    swiper {
      height: calc(730rpx / 2.33) !important;
    }
    swiper-item {
      padding-right: 10rpx;
      padding-left: 10rpx;
    }
    .dots {
      display: flex;
      justify-content: center; //padding-top:10px;
      .dot-item {
        background: #e1e1e1;
        height: 10rpx;
        width: 40rpx;
        border-radius: 10rpx;
        margin: 0 6rpx;
        &.active {
          background: #1db824;
        }
      }
    }
  }
}
#home-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top-box {
    background: #3271ef;
    padding: 14rpx 28rpx 18rpx;
    flex-shrink: 0;
    .top-h1 {
      display: flex;
      align-items: center;
      .input-box {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 16rpx;
        height: 60rpx !important;
        width: 100%;
        padding: 0 20rpx 0 20rpx;
        flex: 1;
        input {
          height: 100%;
          padding: 0 6rpx;
          flex: 1;
          font-size: 22rpx;
        }
        .iconsousuo {
          color: #909090;
          font-size: 32rpx;
        }
      }
      .icongerenzhongxinxuanzhong {
        color: #fff;
        margin: 0 26rpx;
        font-size: 40rpx;
      }
      .iconadd {
        color: #fff;
        font-size: 46rpx;
      }
    }
    .top-h2 {
      display: flex;
      justify-content: space-between;
      padding: 22rpx 50rpx 10rpx;
      .item {
        text-align: center;
        .iconfont {
          color: #fff;
          height: 60rpx;
          margin-bottom: 20rpx;
          image {
            height: 66rpx !important;
            width: 66rpx !important;
          }
        }
        text {
          display: block;
          color: #fff;
          padding-top: 0;
          letter-spacing: 1px;
        }
      }
    }
  }
}
</style>